import React, { useState } from 'react';
import './index.scss';
import SignIn from './components/SignIn';
import SignUp from './components/SignUp';

// 登陆注册
function Sign() {
  // 显示登陆还是注册
  const [inOrUp, setInOrUp] = useState<number>(1);
  return (
    <div className="sign-box">
      <div className="sign">
        <div className="header">
          <div className={`list ${inOrUp ? 'active' : null}`} onClick={() => setInOrUp(1)}>登陆</div>
          <div className={`list ${inOrUp ? null : 'active'}`} onClick={() => setInOrUp(0)}>注册</div>
        </div>
        <div className="content">
          <div className={`list ${inOrUp ? 'active' : null}`}>
            <SignIn inOrUp={inOrUp} />
          </div>
          <div className={`list ${inOrUp ? null : 'active'}`}>
            <SignUp changeTab={(data: number) => setInOrUp(data)} />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Sign;